{% extends 'base.html' %}

{% block title %}{{ title }} - EasyTesting{% endblock %}

{% block header %}{{ title }}{% endblock %}

{% block header_buttons %}
<a href="{% url 'email_config_list' %}" class="btn btn-secondary">
    <i class="bi bi-arrow-left"></i> 返回列表
</a>
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-body">
        <form method="post" novalidate>
            {% csrf_token %}

            <div class="row mb-3">
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="{{ form.name.id_for_label }}" class="form-label">{{ form.name.label }}</label>
                        {{ form.name }}
                        {% if form.name.errors %}
                        <div class="invalid-feedback d-block">
                            {{ form.name.errors }}
                        </div>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="{{ form.email_backend.id_for_label }}" class="form-label">{{ form.email_backend.label }}</label>
                        {{ form.email_backend }}
                        {% if form.email_backend.errors %}
                        <div class="invalid-feedback d-block">
                            {{ form.email_backend.errors }}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="form-check mb-3">
                {{ form.is_active }}
                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                    {{ form.is_active.label }}
                </label>
                {% if form.is_active.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.is_active.errors }}
                </div>
                {% endif %}
            </div>

            <div class="card mb-4 smtp-settings">
                <div class="card-header">
                    <h5 class="mb-0">SMTP 设置</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.smtp_host.id_for_label }}" class="form-label">{{ form.smtp_host.label }}</label>
                                {{ form.smtp_host }}
                                {% if form.smtp_host.help_text %}
                                <small class="form-text text-muted">{{ form.smtp_host.help_text }}</small>
                                {% endif %}
                                {% if form.smtp_host.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.smtp_host.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.smtp_port.id_for_label }}" class="form-label">{{ form.smtp_port.label }}</label>
                                {{ form.smtp_port }}
                                {% if form.smtp_port.help_text %}
                                <small class="form-text text-muted">{{ form.smtp_port.help_text }}</small>
                                {% endif %}
                                {% if form.smtp_port.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.smtp_port.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.smtp_username.id_for_label }}" class="form-label">{{ form.smtp_username.label }}</label>
                                {{ form.smtp_username }}
                                {% if form.smtp_username.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.smtp_username.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.smtp_password.id_for_label }}" class="form-label">{{ form.smtp_password.label }}</label>
                                {{ form.smtp_password }}
                                {% if form.smtp_password.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.smtp_password.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                {{ form.smtp_use_tls }}
                                <label class="form-check-label" for="{{ form.smtp_use_tls.id_for_label }}">
                                    {{ form.smtp_use_tls.label }}
                                </label>
                                {% if form.smtp_use_tls.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.smtp_use_tls.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check mb-3">
                                {{ form.smtp_use_ssl }}
                                <label class="form-check-label" for="{{ form.smtp_use_ssl.id_for_label }}">
                                    {{ form.smtp_use_ssl.label }}
                                </label>
                                {% if form.smtp_use_ssl.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.smtp_use_ssl.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4 api-settings">
                <div class="card-header">
                    <h5 class="mb-0">API 设置</h5>
                </div>
                <div class="card-body">
                    <div class="form-group mb-3">
                        <label for="{{ form.api_key.id_for_label }}" class="form-label">{{ form.api_key.label }}</label>
                        {{ form.api_key }}
                        {% if form.api_key.help_text %}
                        <small class="form-text text-muted">{{ form.api_key.help_text }}</small>
                        {% endif %}
                        {% if form.api_key.errors %}
                        <div class="invalid-feedback d-block">
                            {{ form.api_key.errors }}
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">发件人设置</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.default_from_name.id_for_label }}" class="form-label">{{ form.default_from_name.label }}</label>
                                {{ form.default_from_name }}
                                {% if form.default_from_name.help_text %}
                                <small class="form-text text-muted">{{ form.default_from_name.help_text }}</small>
                                {% endif %}
                                {% if form.default_from_name.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.default_from_name.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="{{ form.default_from_email.id_for_label }}" class="form-label">{{ form.default_from_email.label }}</label>
                                {{ form.default_from_email }}
                                {% if form.default_from_email.help_text %}
                                <small class="form-text text-muted">{{ form.default_from_email.help_text }}</small>
                                {% endif %}
                                {% if form.default_from_email.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.default_from_email.errors }}
                                </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                <a href="{% url 'email_config_list' %}" class="btn btn-secondary me-md-2">取消</a>
                <button type="submit" class="btn btn-primary">{{ submit_text }}</button>
            </div>
        </form>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const emailBackendSelect = document.getElementById('{{ form.email_backend.id_for_label }}');
        const smtpSettings = document.querySelector('.smtp-settings');
        const apiSettings = document.querySelector('.api-settings');
        
        function toggleSettings() {
            const selectedValue = emailBackendSelect.value;
            
            if (selectedValue === 'smtp') {
                smtpSettings.style.display = 'block';
                apiSettings.style.display = 'none';
            } else {
                smtpSettings.style.display = 'none';
                apiSettings.style.display = 'block';
            }
        }
        
        // 初始化显示/隐藏
        toggleSettings();
        
        // 监听选择变化
        emailBackendSelect.addEventListener('change', toggleSettings);
    });
</script>
{% endblock %}
